<template>
  <div>
    <!-- <ul>
      <li>
        <p v-for="(item,index) in indexData" :key="index">{{item}}</p>
      </li>
      <li>{{id}}</li>
      <li>{{xiangqingchiald}}-{{work}}</li>
      <li>
        <p v-for="(item,index) in xiangqingarr" :key="index">{{item}}</p>
      </li>
    </ul> -->
    <!-- 上面的注释，因为上面的 -->
    <!-- 子传父需要一个事件的触发 -->
    <!-- 当我们传递一个input值给父组件时候，那么data里面的msgdata就不该是死数据。 -->
    <input type="text" v-model="msgdata">
    <!-- 这是最开始，子传父，通过点击事件把数据传给父组件，上面是添加活数据时候 -->
    <button @click="itemclcik">
      子传父
    </button>
  </div>
</template>

<script>
export default {
  data(){
    return{
  // 子传父需要传过去的数据
    // msgdata:"这是子传父的数据"
    // 使用活数据
    msgdata:""
    }
  
  },
  props: {
    // indexData: Array,
    // 可以接受多个，意思传过来字符串跟数字都对
    // id: [String, Number],
    // 这个required意思必传
    // xiangqingchiald: {
    //   xiangqing: String,
    //   required: true
    // },
    // 默认值，你这个组件的父组件index6若是没有传值过来则显示缺省值。若是有值传过来则显示传过来的
    // work: {
    //   type: String,
    //   default: "缺省值"
    // },
    // 传过来是数组，但是有时候又要有默认值
    // xiangqingarr: {
    //   type: Array,
    //   default: function() {
    //     return ["默认缺省值"];
    //   }
    // }
  },
  methods:{
    itemclcik(){
      // 子传父使用emit，第一个参数是事件名称，就是父组件要用到接收的，第二个参数就是要传过去的参数
      // console.log("itemclcik")
      // this.$emit("chilachang",this.msgdata)
      //进一步优化1，通过官网解释使用update它是固定的，update后面还是事件的名称，然后父组件接收时候，update是固定的，后面的事件名字是自己命名
       this.$emit("update:chilachang",this.msgdata)
    }
  }
};
</script>

<style>
</style>